<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>增加用户</title>
	</head>
	<body>
		<div id="app">
			<table>
				<tbody>
					<tr>
						<th style="width: 70px;">
							<label>姓名*</label>
						</th>
						<td style="width: 200px;">
							<input type="text" v-model="ownerName" />
						</td>
						<!-- <td>
							<span v-if="isShowError" style="color: red;">error</span>
						</td> -->
					</tr>
					<tr>
						<th style="width: 70px;">
							<label>性别*</label>
						</th>
						<td style="width: 200px;">
							<select style="width:50px; height:22px" id="og">
							            <option value="1">男</option>
							            <option value="2">女</option>					            					
							</select>
						</td>
						<!-- <td>
							<span v-if="isShowError" style="color: red;">error</span>
						</td> -->
					</tr>
					
					
					<tr>
						<th style="width: 70px;">
							<label>籍贯*</label>
						</th>
						<td style="width: 200px;">
							<input type="text" v-model="ownerHometown" />
						</td>
						<!-- <td>
							<span v-if="isShowError" style="color: red;">error</span>
						</td> -->
					</tr>
					<tr>
						<th style="width: 70px;">
							<label>手机号*</label>
						</th>
						<td style="width: 200px;">
							<input type="text" v-model="ownerPhone" />
						</td>
						<td>
							<span v-if="isShowError" style="color: red;">请输入11位字符</span>
						</td>
					</tr>
					
					
					<tr>
						<td></td>
						<td>
							<button @click="add()">增加</button>
							<a href="OwnerQuery.html">
								<button>返回</button>
							</a>
						</td>
						<td></td>
					</tr>
					<!-- <tr>
						<td></td>
						<td><span v-if="isGlobaErrorShow" style="color: red;">增加失败</span></td>
						<td></td>
					</tr> -->
				</tbody>
			</table>
		</div>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					ownerName: "",
					ownerHometown: "",
					ownerPhone: "",
					/* isShowError: false,
					isGlobaErrorShow: false */
				},
				methods:{
					add: function() {
						/* if(this.paramName == '' || this.paramName ==null) {
							this.isShowError = true;
							return;
						} else if(this.paramName.length > 5) {
							this.isShowError = true;
							return;
						} */
						
						axios({
							headers: {'content-type': 'application/x-www-form-urlencoded'},
							method: "post",
							url: "http://localhost:8888/simpleweb/owner/add",
							data : "owner_name=" + this.ownerName + "&" +
									"owner_gender=" + document.getElementById('og').options[document.getElementById('og').selectedIndex].value + "&" +
									"owner_hometown=" + this.ownerHometown + "&" +
									"owner_phone=" + this.ownerPhone,
							
							
									
							
						}).then((res) => {
							console.log(res.data);
							/* if(res.data.res) {
								location.href = "querydemo.html";
							} else {
								this.isGlobaErrorShow = true;
							} */
						}).catch((error )=> {
							console.log(error);
						});
					}
				}
			});
		</script>
	</body>
</html>